@eventcatalogtest/studio/.next/static/chunks/app/design/[id]/page-afdb7aedacaac339.js

A drag and drop UI for distributed systems that keeps your diagrams where they belong – in your repo

(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1905],{28563:(e,t,n)=>{Promise.resolve().then(n.bind(n,80029))},80029:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>F});var l=n(69644),s=n(42018),a=n(44016),r=n(57452),o=n(67120),i=n(43944),c=n(76646),d=n(80588),u=n(31503),h=n(50798),m=n(92289),x=n(30771),g=n(84768),p=n(49568),b=n(23915),f=n(80684),j=n(41544),v=n(42355),y=n(58865),w=n(1118),N=n(38513),A=n(55981),k=n(81437);let E=e=>{let{selection:t}=e;if(!t||!f.Q6.isCollapsed(t))return null;let[n]=f.Q6.edges(t),l={anchor:f.KE.before(e,n,{distance:20,unit:"character"})||f.KE.start(e,[]),focus:n},s=f.KE.string(e,l),a=s.match(/@(\w*)$/);if(a){let t=s.lastIndexOf(a[0]);return{range:{anchor:f.KE.before(e,n,{distance:s.length-t,unit:"character"})||n,focus:n},search:a[1]||""}}return null};var C=n(40461),D=n(86962),I=n(87024),S=n(89780),M=n(19556),K=n(47301),B=n(94843),H=n(49385);let z=e=>{var t,n,l,s,a,r,o,i,c;return e?(null==(n=e.data)||null==(t=n.message)?void 0:t.name)||(null==(s=e.data)||null==(l=s.service)?void 0:l.name)||(null==(r=e.data)||null==(a=r.channel)?void 0:a.name)||(null==(i=e.data)||null==(o=i.actor)?void 0:o.name)||(null==(c=e.data)?void 0:c.name)||e.id:"Unknown"},L=e=>{let{editor:t,search:n,onSelect:s,onClose:a}=e,{nodes:r}=(0,C.default)(),[o,i]=(0,p.useState)(0),c=(0,p.useRef)(null),d=p.useMemo(()=>r.filter(e=>{if(!n)return!0;let t=z(e);if(!t)return!1;let l=String(t).toLowerCase(),s=n.toLowerCase();return l.includes(s)}).map(e=>({id:e.id,type:e.type||"unknown",label:String(z(e))})).slice(0,10),[r,n]);(0,p.useEffect)(()=>{let e=e=>{if(d.length)switch(e.key){case"ArrowDown":e.preventDefault(),i(e=>Math.min(e+1,d.length-1));break;case"ArrowUp":e.preventDefault(),i(e=>Math.max(e-1,0));break;case"Enter":case"Tab":e.preventDefault(),d[o]&&s(d[o]);break;case"Escape":e.preventDefault(),a()}};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[d,o,s,a]),(0,p.useEffect)(()=>{i(0)},[n]),(0,p.useEffect)(()=>{if(c.current&&d.length>0){let e=c.current.children[o];e&&e.scrollIntoView({block:"nearest",behavior:"smooth"})}},[o,d.length]);let[u,h]=(0,p.useState)(null);if((0,p.useEffect)(()=>{try{let e=window.getSelection();if(e&&e.rangeCount>0){let t=e.getRangeAt(0).getBoundingClientRect(),n={top:t.bottom+window.scrollY+4,left:t.left+window.scrollX};h(n)}}catch(e){console.warn("Could not position mention suggestions:",e)}},[n]),!d.length)return null;let m=u||{top:100,left:100};return(0,l.jsxs)("div",{ref:c,className:"fixed z-50 bg-white border border-gray-200 rounded-lg shadow-lg py-1 min-w-48 max-h-60 overflow-y-auto",style:{top:m.top,left:m.left},children:[d.map((e,t)=>{let{Icon:n,color:a}=(e=>{switch(e){case"service":return{Icon:D.A,color:"text-pink-600"};case"event":return{Icon:I.A,color:"text-orange-600"};case"data":return{Icon:S.A,color:"text-blue-600"};case"command":return{Icon:M.A,color:"text-purple-600"};case"query":return{Icon:K.A,color:"text-green-600"};case"domain":return{Icon:B.A,color:"text-indigo-600"};case"channel":return{Icon:H.A,color:"text-yellow-600"};default:return{Icon:D.A,color:"text-gray-600"}}})(e.type);return(0,l.jsxs)("button",{onClick:()=>s(e),className:"w-full px-3 py-2 text-left hover:bg-gray-100 flex items-center gap-2 ".concat(t===o?"bg-blue-50 border-r-2 border-blue-500":""),children:[(0,l.jsx)(n,{className:"w-4 h-4 ".concat(a)}),(0,l.jsxs)("div",{className:"flex-1",children:[(0,l.jsx)("div",{className:"text-sm font-medium text-gray-900",children:e.label}),(0,l.jsx)("div",{className:"text-xs text-gray-500 capitalize",children:e.type})]})]},e.id)}),0===d.length&&(0,l.jsxs)("div",{className:"px-3 py-2 text-sm text-gray-500",children:['No nodes found matching "',n,'"']})]})};var O=n(17684),_=n(26538);let R=e=>{let{attributes:t,children:n,element:s}=e,{nodes:a}=(0,C.default)(),{setSelectedNode:r}=(0,O.U)(),o=a.find(e=>e.id===s.nodeId),i=z(o),c=s.nodeType,{Icon:d,className:u}=(e=>{switch(e){case"actor":return{Icon:_.A,className:"bg-yellow-100 text-yellow-800 border-yellow-300"};case"service":return{Icon:D.A,className:"bg-pink-100 text-pink-800 border-pink-300"};case"event":return{Icon:I.A,className:"bg-orange-100 text-orange-800 border-orange-300"};case"data":return{Icon:S.A,className:"bg-blue-100 text-blue-800 border-blue-300"};case"command":return{Icon:M.A,className:"bg-purple-100 text-purple-800 border-purple-300"};case"query":return{Icon:K.A,className:"bg-green-100 text-green-800 border-green-300"};case"domain":return{Icon:B.A,className:"bg-indigo-100 text-indigo-800 border-indigo-300"};case"channel":return{Icon:H.A,className:"bg-yellow-100 text-yellow-800 border-yellow-300"};default:return{Icon:D.A,className:"bg-gray-100 text-gray-800 border-gray-300"}}})(c);return(0,l.jsxs)("span",{...t,contentEditable:!1,className:"inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium border cursor-pointer hover:opacity-80 transition-opacity ".concat(u),onClick:e=>{e.preventDefault(),o&&r(s.nodeId)},title:"".concat(c,": ").concat(i," (click to jump to node)"),children:[(0,l.jsx)(d,{className:"w-3 h-3"}),(0,l.jsx)("span",{children:i}),(0,l.jsx)("span",{suppressContentEditableWarning:!0,style:{opacity:0,position:"absolute",pointerEvents:"none"},children:n})]})},V=e=>{let{attributes:t,children:n,element:s}=e;switch(s.type){case"mention":return(0,l.jsx)(R,{attributes:t,children:n,element:s});case"heading-one":return(0,l.jsx)("h1",{...t,className:"text-2xl font-bold mb-4",children:n});case"heading-two":return(0,l.jsx)("h2",{...t,className:"text-xl font-semibold mb-3",children:n});case"heading-three":return(0,l.jsx)("h3",{...t,className:"text-lg font-medium mb-2",children:n});case"bulleted-list":return(0,l.jsx)("ul",{...t,className:"list-disc pl-6 mb-2",children:n});case"numbered-list":return(0,l.jsx)("ol",{...t,className:"list-decimal pl-6 mb-2",children:n});case"list-item":return(0,l.jsx)("li",{...t,children:n});default:return(0,l.jsx)("p",{...t,className:"mb-2",children:n})}},T=e=>{let{attributes:t,children:n,leaf:s}=e;return s.bold&&(n=(0,l.jsx)("strong",{children:n})),s.italic&&(n=(0,l.jsx)("em",{children:n})),s.underline&&(n=(0,l.jsx)("u",{children:n})),(0,l.jsx)("span",{...t,children:n})},U=()=>{let{getCurrentDocument:e,updateCurrentDocumentContent:t}=(0,g.useDocumentStore)(),{currentDesign:n}=(0,b.useDesignStore)(),s=(0,p.useMemo)(()=>(e=>{let{isInline:t,isVoid:n,markableVoid:l}=e;return e.isInline=e=>"mention"===e.type||t(e),e.isVoid=e=>"mention"===e.type||n(e),e.markableVoid=e=>"mention"===e.type||l(e),e})((0,v.$k)((0,j.o$)((0,f.ie)()))),[]),a=e(),[r,o]=(0,p.useState)(null);p.useEffect(()=>{s&&(s.history={undos:[],redos:[]},s.selection=null)},[a.id,s]);let i=(0,p.useCallback)(e=>(0,l.jsx)(V,{...e}),[]),c=(0,p.useCallback)(e=>(0,l.jsx)(T,{...e}),[]),d=(0,p.useCallback)(e=>{t(e);let n=E(s);o(n?{search:n.search}:null)},[t,s]),u=e=>{let t=f.KE.marks(s);return!!t&&!0===t[e]},h=e=>{let{selection:t}=s;if(!t)return!1;let[n]=Array.from(f.KE.nodes(s,{at:f.KE.unhangRange(s,t),match:t=>!f.KE.isEditor(t)&&f.Hg.isElement(t)&&t.type===e}));return!!n},m=e=>{u(e)?f.KE.removeMark(s,e):f.KE.addMark(s,e,!0)},x=e=>{let t,n=h(e),l=["numbered-list","bulleted-list"].includes(e);f.gB.unwrapNodes(s,{match:e=>!f.KE.isEditor(e)&&f.Hg.isElement(e)&&["numbered-list","bulleted-list"].includes(e.type),split:!0}),t=n?{type:"paragraph"}:l?{type:"list-item"}:{type:e},f.gB.setNodes(s,t),!n&&l&&f.gB.wrapNodes(s,{type:e,children:[]})},C=(0,p.useCallback)(e=>{((e,t,n,l)=>{let s=E(e);s&&(f.gB.select(e,s.range),f.gB.insertNodes(e,{type:"mention",nodeId:t,nodeType:n,children:[{text:""}]}),f.gB.insertText(e," ".concat(l," ")),f.gB.move(e))})(s,e.id,e.type,e.label),o(null)},[s]),D=(0,p.useCallback)(()=>o(null),[]);return n?(0,l.jsxs)("div",{className:"flex flex-col h-full",children:[(0,l.jsxs)("div",{className:"border-b border-gray-200 p-2 flex gap-1 flex-wrap",children:[(0,l.jsx)("button",{className:"p-2 rounded hover:bg-gray-100 ".concat(u("bold")?"bg-gray-200":""),onMouseDown:e=>{e.preventDefault(),m("bold")},title:"Bold",children:(0,l.jsx)(w.A,{className:"h-4 w-4"})}),(0,l.jsx)("button",{className:"p-2 rounded hover:bg-gray-100 ".concat(u("italic")?"bg-gray-200":""),onMouseDown:e=>{e.preventDefault(),m("italic")},title:"Italic",children:(0,l.jsx)(N.A,{className:"h-4 w-4"})}),(0,l.jsx)("div",{className:"w-px bg-gray-300 mx-1"}),(0,l.jsx)("button",{className:"p-2 rounded hover:bg-gray-100 ".concat(h("heading-one")?"bg-gray-200":""),onMouseDown:e=>{e.preventDefault(),x("heading-one")},title:"Heading 1",children:(0,l.jsx)("span",{className:"text-sm font-bold",children:"H1"})}),(0,l.jsx)("button",{className:"p-2 rounded hover:bg-gray-100 ".concat(h("heading-two")?"bg-gray-200":""),onMouseDown:e=>{e.preventDefault(),x("heading-two")},title:"Heading 2",children:(0,l.jsx)("span",{className:"text-sm font-bold",children:"H2"})}),(0,l.jsx)("button",{className:"p-2 rounded hover:bg-gray-100 ".concat(h("heading-three")?"bg-gray-200":""),onMouseDown:e=>{e.preventDefault(),x("heading-three")},title:"Heading 3",children:(0,l.jsx)("span",{className:"text-sm font-bold",children:"H3"})}),(0,l.jsx)("div",{className:"w-px bg-gray-300 mx-1"}),(0,l.jsx)("button",{className:"p-2 rounded hover:bg-gray-100 ".concat(h("bulleted-list")?"bg-gray-200":""),onMouseDown:e=>{e.preventDefault(),x("bulleted-list")},title:"Bulleted List",children:(0,l.jsx)(A.A,{className:"h-4 w-4"})}),(0,l.jsx)("button",{className:"p-2 rounded hover:bg-gray-100 ".concat(h("numbered-list")?"bg-gray-200":""),onMouseDown:e=>{e.preventDefault(),x("numbered-list")},title:"Numbered List",children:(0,l.jsx)(k.A,{className:"h-4 w-4"})})]}),(0,l.jsx)("div",{className:"flex-1 p-4 overflow-y-auto",children:(0,l.jsx)(j.A,{editor:s,initialValue:a.content,onValueChange:d,children:(0,l.jsx)(j.Fo,{renderElement:i,renderLeaf:c,placeholder:"Start writing your document...",className:"h-full outline-none",spellCheck:!1,style:{minHeight:"100%"}})},a.id)}),r&&(0,l.jsx)(L,{editor:s,search:r.search,onSelect:C,onClose:D})]}):(0,l.jsxs)("div",{className:"p-4 text-gray-500",children:[(0,l.jsx)(y.A,{className:"h-8 w-8 mb-2"}),"No design selected"]})},Z=()=>{let{currentDesign:e}=(0,b.useDesignStore)();return(0,l.jsx)("div",{className:"flex flex-col h-full bg-white",children:(0,l.jsx)("div",{className:"flex-1",children:(0,l.jsx)(U,{},(null==e?void 0:e.id)||"no-design")})})};var $=n(84762),q=n(9791);function F(){let{floatingPanels:e,setFloatingPanelOpen:t}=(0,x.P)(),{isDocumentPanelOpen:n}=(0,g.useDocumentStore)();return(0,l.jsxs)("main",{className:"bg-white h-screen overflow-hidden",children:[(0,l.jsx)(s.A,{}),(0,l.jsx)("div",{className:"h-px bg-gray-200"}),(0,l.jsxs)("div",{className:"flex h-[calc(100vh-50px)]",children:[(0,l.jsx)(a.A,{}),(0,l.jsx)("div",{className:"flex flex-1 overflow-hidden",children:(0,l.jsx)(d.Ln,{children:(0,l.jsxs)(q.YZ,{direction:"horizontal",id:"main-panels",children:[n&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(q.Zk,{id:"document-panel",defaultSize:40,minSize:25,maxSize:40,children:(0,l.jsx)(Z,{})}),(0,l.jsx)(q.TW,{id:"document-resize-handle",className:"w-1 bg-gray-200 hover:bg-gray-300 transition-colors"})]}),(0,l.jsx)(q.Zk,{id:"main-content",defaultSize:n?60:100,children:(0,l.jsxs)("div",{className:"flex h-full relative",children:[(0,l.jsx)("div",{className:"flex-grow h-full",children:(0,l.jsx)(c.A,{})}),(0,l.jsx)(h.A,{}),(0,l.jsxs)("div",{children:[(0,l.jsx)($.A,{title:"Components",isOpen:e.components,onClose:()=>t("components",!1),width:"w-72",height:"h-[calc(100vh-80px)]",position:{left:10,top:10},children:(0,l.jsx)(r.A,{})}),(0,l.jsx)($.A,{title:"Canvas",isOpen:e.canvas,onClose:()=>t("canvas",!1),width:"w-72",height:"h-[calc(100vh-80px)]",position:{left:10,top:10},children:(0,l.jsx)(o.A,{})}),(0,l.jsx)($.A,{title:"EventCatalog Resources",isOpen:e.catalog,onClose:()=>t("catalog",!1),width:"w-72",height:"h-[calc(100vh-80px)]",position:{left:10,top:10},children:(0,l.jsx)(i.A,{})})]})]})})]})})})]}),(0,l.jsx)(u.A,{}),(0,l.jsx)(m.A,{})]})}}},e=>{e.O(0,[7810,7767,8090,1946,6168,2990,9689,3308,8157,461,2517,2116,4810,7358],()=>e(e.s=28563)),_N_E=e.O()}]);